<template lang='jade'>
  .data-analysis
    .data-analysis-container
      .team-area
        img.home-team.left(:src='homeTeamImg', alt='homeTeam.png')
        .team-area-info
          p.league 俄超
          p 安郅馬哈奇卡拉 VS 莫斯科火車頭
          p.time 開賽時間：2017-6-1 星期四 15:30 場地：橫濱三澤球場
        img.guest-team.right(:src='guestTeamImg', alt='guestTeam.png')
      .content
        .content-index.left
          .content-index-fv
            .content-index-fv-title 球隊今場得失球能力 FV指數
            .content-index-fv-bar
              .content-index-fv-bar-home.left 主队
              .content-index-fv-bar-guest.right 客队
            .content-index-fv-content
              ul.index-list.left
                li.goal 得球指数
                li.fumble 失球指数
              .grid-area.right
                .grid-item(v-for='(val,key) in itemNum', :class='val%5 === 0 ? "side" : ""')
                .goal-index
                .home-goal-index
                .fumble-index
                .home-fumble-index
          .content-index-scatter
            #scatter
        .content-annulus.right
          standard-annulus
          asia-annulus
          size-annulus
</template>

<script>
import homeTeamImg from 'images/team2.png'
import guestTeamImg from 'images/team1.png'
import constants from 'constants'
import standardAnnulus from 'components/annulus/standardAnnulus.vue'
import asiaAnnulus from 'components/annulus/asiaAnnulus.vue'
import sizeAnnulus from 'components/annulus/sizeAnnulus.vue'

import echarts from 'echarts'

export default {
  name: 'dataAnalysis',
  components: {
    standardAnnulus,
    asiaAnnulus,
    sizeAnnulus
  },
  data(){
    return {
      homeTeamImg: homeTeamImg,
      guestTeamImg: guestTeamImg,
      itemNum: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],

      dataAll: [
          [
            ['主队往绩', 10.0, 8.04],
            ['主队往绩', 8.0, 6.95],
            ['主队往绩', 13.0, 7.58],
            ['主队往绩', 9.0, 8.81],
          ],
          [
            ['客队往绩', 11.0, 8.33],
            ['客队往绩', 14.0, 9.96],
            ['客队往绩', 6.0, 7.24],
            ['客队往绩', 4.0, 4.26],
          ],
          [
            ['主队今场', 12.0, 10.84],
            ['主队今场', 7.0, 4.82],
            ['主队今场', 5.0, 5.68],
          ],
          [
            ['客队今场', 2.0, 7.04],
            ['客队今场', 8.0, 4.95],
            ['客队今场', 13.0, 6.58]
          ]
      ],

    }
  },
  created(){
    
  },
  mounted(){
    let self = this

    self.dataAll.map(function (item, idx) {
      console.log(item, idx)
    })

    var chart = echarts.init(document.getElementById('scatter'))
    chart.setOption({
        title: {
            text: '球隊近5場得失球分佈 FV指數',
            x: 'center',
            y: 0,
            textStyle: {
              color: '#fff',
              fontSize: 14,
              fontWeight: 'normal',
              align: 'right'
            }
        },
        grid: [
            {x: '180pt', y: '50pt', width: '580pt', height: '480pt'},
            
        ],
        tooltip: {
            formatter: '{c}'
        },
        legend: {
            data:['主队往绩','客队往绩','主队今场','客队今场'],
            orient: 'vertical',
            textStyle: {
              color: '#fff'
            },
            right: 0,
            bottom: 50
        },
        
        xAxis: {
            name: '得球指数',
            nameLocation: 'middle',
            nameGap: 40,
            nameTextStyle: {
              fontSize: 14
            },
            splitLine: {show: true},
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },
        yAxis: {
            name: '失球指数',
            nameLocation: 'middle',
            nameGap: 40,
            nameTextStyle: {
              fontSize: 14
            },
            axisLabel: {

            },
            splitLine: {show: true},
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#fff'
                }
            }
        },

        series: [
            {
                name: '主队往绩',
                type: 'scatter',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: self.dataAll[0].map(function (item, idx) {
                    return [
                      item[1],
                      item[2],
                      item[0]
                    ]
                }),
                itemStyle: {
                    normal: {
                        shadowBlur: 16,
                        shadowColor: '#000',
                        color: '#F34141'
                    }
                }
            },
            {
                name: '客队往绩',
                type: 'scatter',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: self.dataAll[1].map(function (item, idx) {
                    return [
                      item[1],
                      item[2],
                      item[0]
                    ]
                }),
                itemStyle: {
                    normal: {
                        shadowBlur: 16,
                        shadowColor: '#000',
                        color: '#0CB2E2'
                    }
                }
            },
            {
                name: '主队今场',
                type: 'scatter',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: self.dataAll[2].map(function (item, idx) {
                    return [
                      item[1],
                      item[2],
                      item[0]
                    ]
                }),
                itemStyle: {
                    normal: {
                        shadowBlur: 16,
                        shadowColor: '#000',
                        color: '#FD940C'
                    }
                }
            },
            {
                name: '客队今场',
                type: 'scatter',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: self.dataAll[3].map(function (item, idx) {
                    return [
                      item[1],
                      item[2],
                      item[0]
                    ]
                }),
                itemStyle: {
                    normal: {
                        shadowBlur: 16,
                        shadowColor: '#000',
                        color: '#48AC33'
                    }
                }
            }
        ]
    })
  },
  methods: {
    
  }
  
}
</script>

<style lang="less" scoped>
  .data-analysis{
    position: relative;
    width: 100%;
    &-container{
      width: 1024pt;
      position: relative;
      left: 0;
      right: 0;
      margin: auto;
      overflow: hidden;
      .team-area{
        position: relative;
        width: 573.5pt;
        height: 90.5pt;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: 10pt;
        &-info{
          position: absolute;
          width: 350pt;
          left: 0;
          right: 0;
          margin: auto;
          margin-top: 18pt;
          p{
            font-size: 14pt;
            color: #fff;
            text-align: center;
            line-height: 22pt;
          }
          p.league{
            position: relative;
            font-size: 12pt;
            &:before{
              width: 18pt;
              height: 19pt;
              position: absolute;
              content: ' ';
              background-repeat: no-repeat;
              background-size: cover;
              left: -50pt;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              background-image: url('../../images/league7.png');
            }
          }
          p.time{
            font-size: 12pt;
          }
        }
        .home-team, .guest-team{
          height: 90.5pt;
        }
      }
      .content{
        width: 100%;
        height: 1000pt;
        margin-top: 40pt;
        .content-index{
          width: 650pt;
          &-fv{
            width: 100%;
            height: 95pt;
            &-title{
              font-size: 10pt;
              color: #fff;
              text-align: center;
              padding-left: 100pt;
            }
            &-bar{
              width: 130pt;
              height: 13pt;
              margin-left: 250pt;
              margin-top: 10pt;
              &-home{
                position: relative;
                font-size: 10pt;
                color: #fff;
                margin-left: 20pt; 
                &:before{
                  width: 5pt;
                  height: 5pt;
                  position: absolute;
                  content: ' ';
                  left: -40pt;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  background: #F34141;
                  border-radius: 100%;
                }
              }
              &-guest{
                position: relative;
                font-size: 10pt;
                color: #fff;
                &:after{
                  width: 5pt;
                  height: 5pt;
                  position: absolute;
                  content: ' ';
                  left: -40pt;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  background: #0CB2E2;
                  border-radius: 100%;
                }
              }
            }
            &-content{
              width: 100%;
              ul.index-list{
                width: 130pt;
                text-align: center;
                li{
                  font-size: 10pt;
                  color: #fff;
                }
                li.goal{
                  margin-top: 6pt;
                }
                li.fumble{
                  margin-top: 20pt;
                }
              }
              .grid-area{
                width: 436pt;
                height: 60pt;
                border-left: 2pt solid #9A9DA2;
                display:-moz-box;
                display:box;
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                position: relative;
                box-sizing: border-box;
                margin-right: 80pt;
                .grid-item{
                  box-flex: 1;
                  box-align: center;
                  -webkit-box-flex: 1; 
                  -webkit-box-align: center;
                  border-right: 0.5px groove #F2F2F2;
                  margin: 4pt 0;
                  box-sizing: border-box;
                }
                .side{
                  border-right: 2px solid #9A9DA2;
                }
                .goal-index, .home-goal-index{
                  position: absolute;
                  width: 434pt;
                  height: 12pt;
                  background: #0CB2E2;
                  left: 0;
                  top: 8pt;
                }
                .home-goal-index{
                  width: 50pt;
                  background: #F34141;
                }
                .fumble-index, .home-fumble-index{
                  position: absolute;
                  width: 434pt;
                  height: 12pt;
                  background: #0CB2E2;
                  left: 0;
                  bottom: 8pt;
                }
                .home-fumble-index{
                  width: 100pt;
                  background: #F34141;
                }
              }
            }
          }
          &-scatter{
            height: 440pt;
            margin-top: 30pt;
            #scatter{
              height:440pt;
            }
          }
        }
        .content-annulus{
          width: 372pt;
          height: 100%;
        }
      }
    }
  }
    
</style>
